import { Button, Icon, Modal, TextContainer } from "@shopify/polaris";
import { useState, useCallback } from "react";
import styled from "./index.module.less";
import { ExportMinor, CalendarTickMajor } from "@shopify/polaris-icons";
interface Props {
  active: boolean;
  setActive: (value: boolean) => void;
}
function ModalExample({ active, setActive }: Props) {
  const handleChange = useCallback(() => setActive(!active), [active]);

  return (
    <Modal
      //   activator={activator}
      open={active}
      noScroll
      titleHidden
      onClose={handleChange}
      title=""
    >
      <div
        style={{
          color: "#303030",
          fontSize: "14px",
          padding: "16px",
          fontWeight: "600",
          height: "52px",
          backgroundColor: "#F3F3F3",
          borderRadius: "20px 20px 0 0",
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
          zIndex: "999999999999999999",
        }}
      >
        <div>请求客户数据</div>
      </div>
      <Modal.Section>
        <div className={styled.CHXPO}>
          <div className={styled.NJSVIED}>
            <div className={styled.OMHABW}>
              <Icon color="base" source={ExportMinor}></Icon>
            </div>
            <div className={styled.RGDEOM}>
              <div className={styled.KNSDSDW}>共享客户数据</div>
              <div className={styled.AZSFHF}>
                通过电子邮件获取此客户的数据副本，以便与他们共享。订单、收入款项、产品和客户信息等数据可以使用
                CSV 或 Excel 格式导出。<Button plain>了解详细信息</Button>
              </div>
            </div>
          </div>
          <div className={styled.NJSVIED + " " + styled.ZVCNKL}>
            <div className={styled.OMHABW}>
              <Icon color="base" source={CalendarTickMajor}></Icon>
            </div>
            <div className={styled.RGDEOM}>
              <div className={styled.KNSDSDW}>请求时间线</div>
              <div className={styled.AZSFHF}>
                通常，您应在 30
                天内回复客户的请求。如果请求特别难以实现，可延长回复时长。
              </div>
            </div>
          </div>
        </div>
      </Modal.Section>
      <div
        style={{
          display: "flex",
          justifyContent: "end",
          alignItems: "center",
          padding: "16px",
        }}
      >
        <div>
          <Button
            size="slim"
            onClick={() => {
              setActive(false);
            }}
          >
            取消
          </Button>
        </div>
        <div style={{ marginLeft: "10px" }}>
          <Button size="slim" primary>
            请求客户数据
          </Button>
        </div>
      </div>
    </Modal>
  );
}

export default ModalExample;
